<template>
  <view class="login-page">
    <view class="login-title">手机号登录</view>
    <view class="login-label">未注册手机号将自动注册</view>
    <view class="login-int">
      <up-input placeholder="请输入手机号码" type="number" fontSize="28rpx" color="#333" maxlength="11" border="none"
        v-model="phoneValue" @update:modelValue="onloginShow"></up-input>
    </view>
    <view class="login-int">
      <up-input placeholder="请输入短信验证码" type="number" maxlength="6" fontSize="28rpx" color="#333" border="none"
        v-model="codeValue" @update:modelValue="onloginShow">
        <template #suffix>
          <up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
          <view class="int-cord" @click="getCode">{{tips}}</view>
        </template>
      </up-input>
    </view>
    <view class="login-btn">
      <up-button text="登录" shape="circle" :disabled="loginShow" color="#A4682F" @click="onlogin"></up-button>
    </view>
    <view class="login-agreement">
      <up-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" activeColor="#A4682F" name="agree" usedAlone
        v-model:checked="aloneChecked">
        <template #label>
          <view class="agreement-title">
            我已阅读并同意
            <view class="agreement-label" @click.stop="agreement('user')">《用户协议》</view>和
            <view class="agreement-label" @click.stop="agreement('privacy')">《隐私政策》</view>
          </view>
        </template>
      </up-checkbox>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    mobilelogin,
    send,
    info,
    images
  } from "./api.js"
  const phoneValue = ref("")
  const codeValue = ref("")
  const tips = ref('');
  const value = ref('');
  const uCodeRef = ref(null);
  const loginShow = ref(true)
  const aloneChecked = ref(false)
  const codeChange = (text) => {
    tips.value = text;
  };

  async function onlogin() {
    if (!aloneChecked.value) {
      uni.showToast({
        title: '请阅读并同意《用户协议》和《隐私政策》',
        icon: 'none'
      })
      return
    }
    const res = await mobilelogin({
      mobile: phoneValue.value,
      captcha: codeValue.value
    })
    if (res && res.code === 1) {
      uni.setStorageSync("userInfo", res.data.userinfo)
      await imagesApi()
      infoApi()
      uni.navigateBack(-1)
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  }
  const infoApi = (async () => {
    const res = await info()
    if (res && res.code === 1) {
      uni.setStorageSync("user", res.data)
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none"
      })
    }
  })

  function agreement(val) {
    if (val === 'user') {
      uni.navigateTo({
        url: '/pages/my/agreementPage/agreementUser'
      })
    } else if (val === 'privacy') {
      uni.navigateTo({
        url: '/pages/my/agreementPage/agreementPrivacy'
      })
    }
  }

  function onloginShow(val) {
    loginShow.value = phoneValue.value && codeValue.value ? false : true
  }
  const getCode = async () => {
    if (uCodeRef.value.canGetCode) {
      // 模拟向后端请求验证码
      if (!phoneValue.value) {
        uni.showToast({
          title: '请填写手机号',
          icon: "none"
        })
        return
      }
      if (!aloneChecked.value) {
        uni.showToast({
          title: '请阅读并同意《用户协议》和《隐私政策》',
          icon: 'none'
        })
        return
      }
      const res = await send({
        mobile: phoneValue.value,
        event: 'mobilelogin'
      })
      uni.showLoading({
        title: '正在获取验证码'
      })
      if (res && res.code === 1) {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        uni.$u.toast('验证码已发送');
        // 通知验证码组件内部开始倒计时
        uCodeRef.value.start();
      } else {
        uni.$u.toast(`${res.msg}`);
      }
    } else {
      uni.$u.toast('倒计时结束后再发送');
    }
  }
  const imagesApi = (async () => {
    const res = await images()
    if (res && res.code == 1) {
      uni.setStorageSync("atlas", res.data)
    }
  })
</script>

<style lang="scss" scoped>
  .login-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-sizing: border-box;
    padding: 64rpx 40rpx 0;

    .login-title {
      font-size: 44rpx;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);

    }

    .login-label {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-top: 12rpx;
    }

    .login-int {
      width: 100%;
      height: 88rpx;
      border-radius: 420rpx;
      background: #F2F2F2;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 32rpx;
      margin-top: 48rpx;

      .int-cord {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);

      }
    }

    .login-int:last-child {
      margin-top: 32rpx;
    }

    .login-btn {
      width: 100%;
      height: 88rpx;
      display: flex;
      align-items: center;
      margin-top: 56rpx;
    }

    .login-agreement {
      width: 100%;
      height: 36.51rpx;
      margin-top: 32rpx;
      text-align: center;
      font-size: 22rpx;
      font-weight: 400;
      letter-spacing: 0rpx;
      line-height: 31.86rpx;
      color: rgba(153, 153, 153, 1);
      display: flex;
      align-items: center;
      justify-content: center;

      .agreement-title {
        display: flex;
        align-items: center;
      }

      .agreement-label {
        color: $color;
      }
    }
  }
</style>